<template>
	<div class="role-main-box">
		<el-table :show-header="false" :data="permissions" :row-class-name="tableRowClassName" default-expand-all
			row-key="key" class="role-main-box">
			<el-table-column label="功能模块" width="180" class-name="functions">
				<template #default="scope">
					<el-checkbox v-if="!preview" v-model="scope.row.checked" :indeterminate="scope.row.indeterminate"
						@change="handlePermissionChnage(scope.row)">{{ scope.row.name }}
					</el-checkbox>
					<template v-else>
						{{ scope.row.name }}
					</template>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="权限">
				<template #default="scope">
					<template v-for="(permission, index) in scope.row.permission">
						<br v-if="
							index > 0 &&
							permission['show_group'] &&
							scope.row.permission[index - 1]['show_group'] &&
							permission['show_group'] != scope.row.permission[index - 1]['show_group']
						" />
						<el-checkbox v-if="!preview" @change="handlePermissionChnage(permission)"
							:label="permission.name" v-model="permission.checked">{{ permission.name }}
						</el-checkbox>
						<template v-else-if="permission.checked">
							<el-tag>{{ permission.name }}</el-tag>
						</template>
					</template>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
export default {
	props: {
		modelValue: { type: Array, default: () => [] },
		preview: { type: Boolean, default: false }
	},
	data() {
		return {
			permissions: [],
			conslist: [],
			defaultArr: [],
		};
	},
	watch: {
		permissions: {
			handler: function (newVal) {
				this.$emit("update:modelValue", newVal);
			},
			deep: true,
		},
		modelValue: {
			handler: function (newVal) {
				this.permissions = newVal
			},
			deep: true,
			immediate: true
		},
	},
	methods: {
		tableRowClassName({ row, rowIndex }) {
			if (row.permissions && rowIndex % 2 === 0) {
				return "bg-row";
			} else {
				return "";
			}
			return "";
		},
		permissionsHander(_permission) {
			let data = [];
			_permission.forEach((ele) => {
				if (ele.checked || ele.indeterminate) {
					if (ele.children) {
						let _children = this.permissionsHander(ele.children);
						if (!_children) {
							delete ele["children"];
						} else {
							ele.children = _children;
						}
					}
					if (ele.permission) {
						let _permission = this.permissionsHander(ele.permission);
						if (!_permission) {
							delete ele["permission"];
						} else {
							ele.permission = _permission;
						}
					}
					data.push(ele);
				}
			});
			return data;
		},

		/**
		 * 变化
		 */
		handlePermissionChnage(row) {
			row.indeterminate = false
			this._permissionChildrenChecked(row)

			//获取上级的key集合
			let parentKeys = [];
			let keys = row.key.split("-");
			keys.forEach((ele, index) => {
				if (index === keys.length - 1) return;
				let last = parentKeys[parentKeys.length - 1]

				if (index === 0) {
					parentKeys.push(ele)
				} else {
					let _key = ''
					for (let i = 0; i <= index; i++) {
						if (i === 0) {
							_key = parentKeys[i]
						} else {
							_key = _key + '-' + keys[i]
						}
					}
					parentKeys.push(_key)
				}
			});

			if (row.relyOn) {
				if (row.checked) {
					row.relyOn.forEach((_key) => {
						this._permissionCheck(this.permissions, _key)
					})
				}
			}

			if (!row.checked) {
				this._permissionUnsetRelyOnCheck(this.permissions, row.key)
			}

			parentKeys.reverse().forEach((ele, index) => {
				this._permissionParentsChecked(null, ele);
			});
		},

		/**
		 * 取消指定的依赖key
		 */
		_permissionUnsetRelyOnCheck(permissions, key) {
			permissions.forEach(ele => {
				if (ele.relyOn) {
					ele.relyOn.forEach((_key) => {
						if (key === _key) {
							ele.checked = false
							ele.indeterminate = false
							this._permissionUnsetRelyOnCheck(this.permissions, ele.key)
						}
					})
				}

				if (ele.children) {
					this._permissionUnsetRelyOnCheck(ele.children, key)
				}

				if (ele.permission) {
					this._permissionUnsetRelyOnCheck(ele.permission, key)
				}
			})
		},

		/**
		 * 选择指定的权限
		 */
		_permissionCheck(permissions, key) {
			permissions.forEach(ele => {
				if (ele.key === key) {
					ele.checked = true
					ele.indeterminate = false

					if (ele.relyOn && row.checked) {
						ele.relyOn.forEach((_key) => {
							this._permissionCheck(this.permissions, _key)
						})
					}
				}

				if (ele.children) {
					this._permissionCheck(ele.children, key)
				}

				if (ele.permission) {
					this._permissionCheck(ele.permission, key)
				}
			})
		},

		/**
		 * 选择子集
		 */
		_permissionChildrenChecked(row) {
			if (row.children) {
				row.children.forEach(ele => {
					ele.checked = row.checked
					ele.indeterminate = false
					this._permissionChildrenChecked(ele)
				})
			}

			if (row.permission) {
				row.permission.forEach(ele => {
					ele.checked = row.checked
					ele.indeterminate = false
					this._permissionChildrenChecked(ele)
				})
			}
		},

		/**
		 * 选择父级
		 */
		_permissionParentsChecked(permissions, key) {

			if (permissions === null) {
				permissions = this.permissions;
			}

			permissions.forEach((ele) => {
				if (key !== ele.key) {
					if (ele.permission) {
						this._permissionParentsChecked(ele.permission, key);
					} else if (ele.children) {
						this._permissionParentsChecked(ele.children, key);
					}
				} else {
					let checkedNum = 0;
					let childrenNum = 0;
					if (ele.permission && ele.permission.length) {
						childrenNum = ele.permission.length;
						checkedNum = this._permissionChildrenCheckedNum(ele.permission);
					} else if (ele.children && ele.children.length) {
						childrenNum = ele.children.length;
						checkedNum = this._permissionChildrenCheckedNum(ele.children);
					}

					if (checkedNum === -1) {
						ele.indeterminate = true;
						ele.checked = false;
					} else if (checkedNum === 0) {
						ele.indeterminate = false;
						ele.checked = false;
					} else if (checkedNum !== childrenNum) {
						ele.indeterminate = true;
						ele.checked = false;
					} else {
						ele.indeterminate = false;
						ele.checked = true;
					}
				}
			});
		},

		//获取子集选中数量
		_permissionChildrenCheckedNum(permissions) {
			let num = 0;
			let indeterminate = false;
			permissions.forEach((ele) => {
				if (ele.checked) {
					num++;
				}

				if (ele.indeterminate) {
					indeterminate = true;
				}
			});

			if (indeterminate) return -1;
			return num;
		}
	},
};
</script>

<style>
.role-main-box {
	width: 100%;
}

.role-main-box .el-table td.el-table__cell,
.role-main-box .el-table th.el-table__cell.is-leaf {
	border-bottom: none;
}

.role-main-box .el-tag {
	margin-bottom: 5px;
	margin-right: 10px;
}

.role-main-box .el-table--group::after,
.role-main-box .el-table--border::after,
.role-main-box .el-table::before {
	content: "";
	position: absolute;
	background-color: #fff;
	z-index: 1;
}

.role-main-box .el-tag+.el-tag {
	margin-left: 0;
}

.role-main-box .functions .el-checkbox__label {
	font-weight: 600;
	font-size: 14px;
}

.role-main-box .zengp111 .p20 {
	padding: 0;
}

.role-main-box .zengp111 .p20 .el-form-item__content {
	margin: 0 !important;
}

.role-main-box .zengp111 .p20 .el-form-item--medium {
	margin: 5px !important;
}

.role-main-box .zengp111 .p20 .el-form-item--medium input {
	width: 100% !important;
}

.role-main-box .title .el-radio-group {
	line-height: 51px !important;
}

.role-main-box .avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.role-main-box .avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.role-main-box .avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 120px;
	height: 160px;
	line-height: 160px;
	text-align: center;
}

.role-main-box .avatar {
	width: 120px !important;
	height: 160px !important;
	display: block;
}

.role-main-box .sub-title {
	height: 30px;
	line-height: 30px;
}
</style>
